<template>
	<div class="myheader">
		<div class="myheader_right">
			<div style="margin-left: 20px;display: flex;align-items: center;">
				<p style="color:#878787;"> {{ currentPath }} </p>
			</div>
			<div class="info">
				<el-dropdown>
					<span class="el-dropdown-link" style="outline: none">
						<div style="
                                display: flex;
                                align-items: center;
                                cursor: pointer;
                                outline: none;
                            ">
							<img src="../assets/img/logo@2x.png" alt="" style="
                                    height: 40px;
                                    width: 40px;
                                    border-radius: 100%;
                                " />
							<span style="color: #333">{{ username }}</span>
							<i class="el-icon-arrow-down el-icon--right" style="font-size: 0.2rem"></i>
						</div>
					</span>
					<template #dropdown>
						<el-dropdown-menu class="header_drop" split-button type="primary" @click="handleClick">
							<el-dropdown-item command="out">退出登录</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, onMounted, watch } from "vue";
	import { useRoute, useRouter } from "vue-router";
	import { ElMessageBox } from "element-plus";

	const router = useRouter();
	const route = useRoute();
	const username = ref('');
	const currentPath = ref('');

	// 处理退出登录
	const handleClick = () => {
		ElMessageBox.confirm("确认退出登录吗？", "提示", {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}).then(() => {
			localStorage.clear();
			router.push({ path: "/login" });
		});
	};

	// 获取用户名
	onMounted(() => {
		username.value = localStorage.getItem("user_name") || '未登录';
		generateCurrentPath();
	});

	// 监听路由变化
	watch(route, () => {
		generateCurrentPath();
	});

	// 根据路由信息生成当前路径
	const generateCurrentPath = () => {
		const matchedRoutes = route.matched;
		const pathArray = matchedRoutes.map((r) => r.meta.title).filter(title => title);
		console.log(pathArray)
		currentPath.value = pathArray.join(' / ');
	};

	const openWindow = (url) => {
		window.open(url, "_blank");
	};
</script>


<style lang="scss" scoped>
	.myheader {
		background-color: #fff;
		width: 100%;
		height: 60px;
		display: flex;
		font-size: 16px;
		box-sizing: border-box;
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
		z-index: 5;

		.info {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 35px;
			height: 100%;
			cursor: pointer;

			img {
				width: 40px;
				height: 40px;
				border-radius: 40px;
				margin-right: 10px;
			}
		}
	}

	.myheader_left {
		height: 100%;
		width: 200px;
		display: flex;
		align-items: center;
		padding-left: 20px;
		box-sizing: border-box;
	}

	.myheader_right {
		width: 100%;
		flex: 1;
		height: 100%;
		padding-right: 20px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.loginout {
		display: flex;
		align-items: center;
		margin-left: 10px;
		cursor: pointer;
		padding: 0 8px;
	}

	.loginout:hover {
		background-color: #161d31;
		height: 100%;
	}
</style>